<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <router-link :to="{name: 'myhome', query: { page: 404 }}">主页</router-link>
        <router-link to="/page/1">页面1</router-link>
        <router-link to="/page/2">页面2</router-link>
        <router-link to="/page/3">页面3</router-link>
        <button @click="back">后退</button>
        <router-view></router-view>
    </div>

    <template id="home">
        <div>
            <h3>这里是主页home{{this.$route.query.page}}</h3>
        </div>
    </template>

    <template id="page">
        <div>
            <h3>这里是页面{{this.$route.params.pageNum}}</h3>
        </div>
    </template>

    <script src="../lib/Vue/vue.js"></script>
    <script src="../lib/Vue/vue-router.js"></script>
    <script>

        const router = new VueRouter({
            routes: [
                {
                    path: '/home',
                    name: 'myhome',
                    component: {
                        template: '#home'
                    }
                },
                {
                    path: '/page/:pageNum',
                    component: {
                        template: '#page'
                    }
                }
            ]
        })

        var vm = new Vue({
            el: '#app',
            router,
            methods: {
                back() {
                    router.go(-1)
                }
            },
            watch: {
                $route(to, from) {
                    console.log('我是to',to);
                    console.log('我是from',from);
                    if (to.path == '/page/3') {
                        router.push('/page/home')
                    }
                }
            },
        })
    </script>
</body>
</html>